<template>
  <div>
    <el-divider>基本信息</el-divider>
    <div class="dialog_left">
      <div>
        <ImagePreview :src="form.image" :width="`100%`" :height="337"></ImagePreview>
        <!-- <el-image :src="form.image" style="width:100%;height: 100%;">
            </el-image> -->
      </div>
      <div>
        <el-descriptions direction="vertical" :column="5" border>
          <el-descriptions-item label="设备名称">{{ form.equipmentName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="品牌" :span="3">{{ form.brand || '-' }}</el-descriptions-item>
          <el-descriptions-item label="规格型号" :span="3">{{ form.model || '-' }}</el-descriptions-item>
          <el-descriptions-item label="单位" :span="3">
            <label v-for="(item, index) in dictdatalist" :key="index">
              <template v-if="form.unit === item.dictValue">
                {{ item.dictLabel }}
              </template>
            </label>
          </el-descriptions-item>
          <el-descriptions-item label="供应商">{{ form.supplierName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="计量设备" :span="3">{{ meterageFlag[form.meterageFlag] || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="计量编号" :span="3">{{ form.meterageNum || '-' }}</el-descriptions-item>
          <el-descriptions-item label="类别" :span="3">{{ form.typeName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <dict-tag :options="statusFlag" :value="form.status" />
          </el-descriptions-item>
          <!-- {{ statusFlag[form.status] || '-' }}  -->
          <el-descriptions-item label="备注">{{ form.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-divider>相关附件</el-divider>
    <el-link type="primary" :href="form.file" target="_blank">{{ form.file }}</el-link>
  </div>
</template>

<script>
import { getchangebase, getdatalist } from '@/api/equipment/equipment.js'
// import Upload from '@/components/upload/index.vue'
export default {
  name: 'detailed',
  props: ['rowObj'],
  components: {
    // Upload
  },
  data () {
    return {
      form: {
      },
      dict: [],//单位字典列表
      typedict: [],//类别列表
      supplierdict: [],//供应商列表
      dictdatalist: [],
      rules: {
        equipmentName: { required: true, message: '必填', trigger: 'blur' },
        brand: { required: true, message: '必填', trigger: 'blur' },
        model: { required: true, message: '必填', trigger: 'blur' },
        supplierId: { required: true, message: '必填', trigger: 'blur' },
        typeId: { required: true, message: '必填', trigger: 'blur' },
        unit: { required: true, message: '必填', trigger: 'blur' },
        meterageFlag: { required: true, message: '必填', trigger: 'blur' },
        image: { required: true, message: '必填', trigger: 'blur' },
        meterageNum: { required: true, message: '必填', trigger: 'blur' },
      }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      let res = await getchangebase(this.rowObj.equipmentBaseId);
      let data = await getdatalist({ dictType: 'base_unit' })//单位词典
      this.dictdatalist = data.data
      this.form = res.data
    },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;
  display: flex;
}

.dialog_left>div:nth-child(1) {
  flex: 1
}

.dialog_left>div:nth-child(2) {
  flex: 2;
  margin-left: 10px
}
</style>